<template>
  <div class="rank">
    <div class="tab">
      <div class="tab-tit clearfix">
        <a @click="activeIndex=index;" v-for="(item,index) in $store.state.product.rankList" :key="item.typeId"
          href="javascript:;" :class="{on:activeIndex===index}">
          <p class="img">
            <i></i>
          </p>
          <p class="text">{{item.typeTitle}}排行</p>
        </a>
      </div>

    </div>

    <div v-show="activeIndex===index" v-for="(item,index) in $store.state.product.rankList" :key="item.typeId"
      class="content">
      <ul>
        <li>
          <div v-for="info in item.goodsList" :key="info.id" class="img-item">
            <p class="tab-pic">
              <a href="#">
                <img :src="info.goodsImg">
              </a>
            </p>
            <div class="tab-info">
              <div class="info-title">
                <a href="#">{{info.goodsName}}</a>
              </div>
              <p class="info-price">定金：{{info.goodsPrice/1 | currency("￥")}}</p>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "Rank",
  data () {
    return {
      // 选中的下标
      activeIndex: 0
    }
  },
  mounted () {
    this.$store.dispatch("product/getRankListAsync");
  }
}
</script>
